<template>
	<view class="content">
		<u-top-tips ref="uTips"></u-top-tips>
		<u-popup v-model="show" mode="center" width="520rpx" height="540rpx" border-radius="8">
			<view class="popup_modal">
				<view class="title">注意事项</view>
				<view class="content">
					1.每个证件只能绑定一个账号<br>
					2.需要本人上传【露脸手持证件照片】和 【证件信息页照片】证件信息页照片需占屏幕70%以上<br>
					3.证件必须真实实拍，不能使用复印件，且信息需要完整清晰可辨认（无反光、遮挡、水印、证件套、logo等)
				</view>
				<view class="popup_btn" @click="know">我知道了</view>
			</view>
		</u-popup>

		<u-popup mode="bottom" v-model="tagSheetVisible" :border-radius="36" :closeable="false">
			<view class="bottomSheet_content">
				<scroll-view scroll-y="true">
					<view class="title">选择您的标签</view>
					<view class="sp" v-for="(row,index) in tagsData" :key="index">
						<u-tag :text="row.value" type="info" shape="circle " :mode="row.select === false ? 'plain' : 'dark'"  @tap="selectTag(index)"/>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<form @submit="register">
			<!-- 身份证区域 -->
			<view class="photo_area">
				<view class="front">
					<view class="front_Img">
						<zh-upFile :config='config' :background='idcard1show' :type='1' width='305rpx' height='212rpx' @upLoadFile='upImgcard1'
						 :upFileType="2">
						</zh-upFile>
					</view>
					<view class="text">手持证件个人信息页</view>
				</view>
				<view class="behind">
					<view class="behind_Img">
						<zh-upFile :config='config' :background='idcard2show' :type='1' width='305rpx' height='212rpx' @upLoadFile='upImgcard2'
						 :upFileType="2">
						</zh-upFile>
					</view>
					<view class="text">身份证国徽面</view>
				</view>
			</view>

			<!-- 基本信息区域 -->
			<view class="info_content">
				<view class="row">
					<view class="nominal">真实姓名</view>
					<view class="input"><input name="name" v-model="form.name" placeholder="请填写您的真实姓名" type="text" placeholder-class="input_pla" /></view>
				</view>
				<view class="row">
					<view class="nominal">身份证号码</view>
					<view class="input"><input name="idno" v-model="form.idno" placeholder="请填写您的身份证号码" type="number"
						 placeholder-class="input_pla" /></view>
				</view>
				<view class="row">
					<view class="nominal">身高</view>
					<view class="input"><input name="height" v-model="form.height" placeholder="请填写您的昵称" type="number" placeholder-class="input_pla" /><span>cm</span></view>
				</view>
				<view class="row">
					<view class="nominal">体重</view>
					<view class="input"><input name="weight" v-model="form.weight" placeholder="请填写您的昵称" type="number"
						 placeholder-class="input_pla" /><span>kg</span></view>
				</view>
				<view class="row" @tap="openTagsPopue">
					<view class="nominal">擅长风格</view>
					<view class="input"><input disabled v-model="tagsShow" placeholder="请选择您擅长的风格" type="text" placeholder-class="input_pla" style="overflow: hidden;text-overflow: ellipsis"/>
						<view class="icon xia"></view>
					</view>
				</view>
			</view>

			<!-- 专业技能证书（选传） -->
			<view class="photo_area">
				<view class="start">
					<view class="title">专业技能证书 <span style="color: #999999">（选传）</span></view>
					<zh-upFile :config='config' :background='certImgshow' :type='1' width='164rpx' height='164rpx' @upLoadFile='upImgcard3'
					 :upFileType="2">
					</zh-upFile>
				</view>
			</view>

			<!-- 服务开通 -->
			<view class="serve_area">
				<view class="label">
					<view class="label_title">开通线上服务</view>
					<switch :checked='form.onlineServer === 0' name="onlineServer" v-model="form.onlineServer" style="transform:scale(0.8)"
					 color="#1C1724" />
				</view>
				<view class="label">
					<view class="label_title">开通线下服务</view>
					<switch :checked='form.offlineServer === 0' name="offlineServer" v-model="form.offlineServer" style="transform:scale(0.8)"
					 color="#1C1724" />
				</view>
			</view>

			<view class="searve_area2">（可同时勾选两个）</view>

			<view class="tip">
				<checkbox-group @change="checkboxChange">
					<label class="label">
						<checkbox style="transform:scale(0.6)" :checked="isRead" color="#333333" />
						<view class="tip_text">我阅读并同意<span style="color: #ffc051" @click.stop="toPage('userAgreement')">《陌搭用户协议》</span></view>
					</label>
				</checkbox-group>
			</view>

			<button v-if="status !== 0" class="mocup_btn btn" type="primary" :loading="loading" form-type="submit">提交</button>
		</form>
	</view>
</template>

<script>
	import {
		isBlank,
		uuid
	} from '@/utils/common.js'
	import zhUpFile from '@/components/zh-upFile'

	export default {
		data() {
			return {
				status: null, // 注册状态
				idcard1show: '/static/img/stylist/register_01.png',
				idcard2show: '/static/img/stylist/register_02.png',
				certImgshow: '/static/img/img_pla.png',
				tagsShow: '',
				form: {
					idcard1: '',
					idcard2: '',
					idno: '',
					name: '',
					tags: '',
					cert: '',
					onlineServer: 0, // 0.开通 1.不开通
					offlineServer: 0,
					height: null,
					weight: null
				},
				tagSheetVisible: false,
				tagsData: [],

				isRead: true,
				loading: false,
				show: true,
				postData: {
					token: '',
					key: ''
				},
				config: {
					count: 1, // 上传图片张数
					sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				},
			}
		},
		components: {
			'zh-upFile': zhUpFile
		},
		onLoad() {
			// 获取擅长的风格
			this.getDictionary()
			
			// 查询我的申请搭配师记录（缓存填写的信息）
			this.myApplies()
			
			if (uni.getStorageSync('hasInfirst_register') === true) {
				this.show = false
			}
		},
		methods: {
			toPage() {
				uni.navigateTo({
					url:"/pagesB/pages/settings/WebViewPage?title=用户协议&url=https://gms.imguangguang.com/user_privacy.html"
				});
			},
			getDictionary() {
				var data = {
					dicType: 'style'
				}
			
				this.$u.api.findDicByType(data).then(res => {
					if (res.code === 200) {
						this.tagsData = res.data
						for(let i in this.tagsData) {
							this.tagsData[i].select = false
						}
					}
				})
			},
			myApplies() {
				this.$u.api.myApplies().then(res => {
					if (res.code === 200) {
						if (res.data !== null) {
							// 填写过的资料
							this.form = {
								id: res.data.id,
								idcard1: res.data.idcardPositive,
								idcard2: res.data.idcardBack,
								idno: res.data.idcardno,
								name: res.data.realName,
								tags: res.data.tags,
								cert: res.data.cert,
								onlineServer: res.data.onlineServer, // 0.开通 1.不开通
								offlineServer: res.data.offlineServer,
								height: res.data.height,
								weight: res.data.weight
							}
							
							if(!isBlank(res.data.tags)) {
								let tags = JSON.parse(res.data.tags)
								let str = ''
								for(let i in tags) {
									str = str + tags[i] + ','
									for(let j in this.tagsData) {
										if(this.tagsData[j].value === tags[i]) {
											this.tagsData[j].select = true
										}
									}
								}
								this.tagsShow = str
							}

							this.idcard1show = "https://posting.imguangguang.com/" + res.data.idcardPositive
							this.idcard2show = "https://posting.imguangguang.com/" + res.data.idcardBack
							if (!isBlank(res.data.cert)) {
								this.certImgshow = "https://posting.imguangguang.com/" + res.data.cert
							}
							
							this.status = res.data.status
							switch (res.data.status) {
								case 0:
									this.$refs.uTips.show({
										title: '后台正在审核中',
										type: 'primary',
										duration: '300000'
									})
									break;
								case 1:
									this.$refs.uTips.show({
										title: '审核通过，请返回首页刷新小程序',
										type: 'success',
										duration: '300000'
									})
									break;
								case 2:
									this.$refs.uTips.show({
										title: '审核已驳回，' + res.data.suggestion + ', 请重新填写资料',
										type: 'error',
										duration: '300000'
									})
									break;
							}
						}
					}
				})
			},
			// 上传身份证图片
			upImgcard1(res) {
				var _this = this

				uni.showLoading({
					title: '上传中...'
				});

				let tempFilePaths = res.tempFilePaths

				// 获取token 
				_this.$u.api.getPostingQiniuToken().then(res => {
					if (res.code === 200) {
						_this.postData.token = JSON.parse(res.data).qiniuToken
						_this.postData.key = _this.$u.guid(tempFilePaths[i])
						console.log(_this.postData)
						// 开始上传
						for (var i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://upload-Z2.qiniup.com', //华南地区用这个
								filePath: tempFilePaths[i],
								name: 'file',
								formData: {
									'key': _this.postData.key,
									'token': _this.postData.token
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes)
									_this.form.idcard1 = JSON.parse(uploadFileRes.data).key
									_this.idcard1show = "https://posting.imguangguang.com/" + _this.form.idcard1
								},
								fail: (error) => {
									if (error && error.response) {
										uni.showToast({
											title: error.response,
											icon: 'none'
										})
									}
								},
								complete: () => {
									setTimeout(function() {
										uni.hideLoading();
									}, 250);
								},
							});
						}
					}
				})
			},
			upImgcard2(res) {
				var _this = this

				uni.showLoading({
					title: '上传中...'
				});

				let tempFilePaths = res.tempFilePaths

				// 获取token 
				_this.$u.api.getPostingQiniuToken().then(res => {
					if (res.code === 200) {
						_this.postData.token = JSON.parse(res.data).qiniuToken
						_this.postData.key = _this.$u.guid(tempFilePaths[i])
						console.log(_this.postData)
						// 开始上传
						for (var i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://upload-Z2.qiniup.com', //华南地区用这个
								filePath: tempFilePaths[i],
								name: 'file',
								formData: {
									'key': _this.postData.key,
									'token': this.postData.token
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes)
									_this.form.idcard2 = JSON.parse(uploadFileRes.data).key
									_this.idcard2show = "https://posting.imguangguang.com/" + _this.form.idcard2
								},
								fail: (error) => {
									if (error && error.response) {
										uni.showToast({
											title: error.response,
											icon: 'none'
										})
									}
								},
								complete: () => {
									setTimeout(function() {
										uni.hideLoading();
									}, 250);
								},
							});
						}
					}
				})
			},
			upImgcard3(res) {
				var _this = this

				uni.showLoading({
					title: '上传中...'
				});

				let tempFilePaths = res.tempFilePaths

				// 获取token 
				_this.$u.api.getPostingQiniuToken().then(res => {
					if (res.code === 200) {
						_this.postData.token = JSON.parse(res.data).qiniuToken
						_this.postData.key = _this.$u.guid(tempFilePaths[i])
						// 开始上传
						for (var i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://upload-Z2.qiniup.com', //华南地区用这个
								filePath: tempFilePaths[i],
								name: 'file',
								formData: {
									'key': _this.postData.key,
									'token': _this.postData.token
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes)
									_this.form.cert = JSON.parse(uploadFileRes.data).key
									_this.certImgshow = "https://posting.imguangguang.com/" + _this.form.cert
								},
								fail: (error) => {
									if (error && error.response) {
										uni.showToast({
											title: error.response,
											icon: 'none'
										})
									}
								},
								complete: () => {
									setTimeout(function() {
										uni.hideLoading();
									}, 250);
								},
							});
						}
					}
				})
			},
			// 打开风格选择弹窗
			openTagsPopue() {
				this.tagSheetVisible = true
			},
			// 选择标签
			selectTag(index) {
				let list = []
				this.tagsData[index].select = !this.tagsData[index].select
				for(let i in this.tagsData) {
					if(this.tagsData[i].select === true) {
						list.push(this.tagsData[i].value)
					} 
				}
				this.form.tags = JSON.stringify(list)
				this.tagsShow = list.toString()
			},
			// 我知道了
			know() {
				this.show = false
				uni.setStorageSync('hasInfirst_register', true)
			},
			checkboxChange: function(e) {
				if (e.detail.value.length > 0) {
					this.isRead = true
				} else {
					this.isRead = false
				}
			},
			// 申请注册
			register(e) {
				if (!this.isRead) {
					uni.showToast({
						title: "请先阅读完相关协议并同意勾选",
						icon: 'none'
					})
					return false
				}

				if (this.form.idcard1 === '' || this.form.idcard2 === '') {
					uni.showToast({
						title: "请上传身份证正反面照",
						icon: 'none'
					})
					return false
				}

				if (isBlank(this.form.name)) {
					uni.showToast({
						title: "请输入真实姓名",
						icon: 'none'
					})
					return false
				}

				if (isBlank(this.form.idno)) {
					uni.showToast({
						title: "请输入身份证号码",
						icon: 'none'
					})
					return false
				}

				if (!this.$u.test.idCard(this.form.idno)) {
					uni.showToast({
						title: "请输入正确的身份证号",
						icon: 'none'
					})
					return false
				}

				if (e.detail.value.onlineServer === true) {
					this.form.onlineServer = 0
				} else {
					this.form.onlineServer = 1
				}

				if (e.detail.value.offlineServer === true) {
					this.form.offlineServer = 0
				} else {
					this.form.offlineServer = 1
				}

				var param = {
					idcard1: this.form.idcard1,
					idcard2: this.form.idcard2,
					idno: this.form.idno,
					name: this.form.name,
					onlineServer: this.form.onlineServer,
					offlineServer: this.form.offlineServer
				}

				if (!isBlank(this.form.height)) {
					param.height = Number(this.form.height)
				}
				if (!isBlank(this.form.weight)) {
					param.weight = Number(this.form.weight)
				}
				if (!isBlank(this.form.cert)) {
					param.cert = this.form.cert
				}
				if (!isBlank(this.form.tags)) {
					param.tags = this.form.tags
				}

				uni.showLoading({
					title: "正在提交中"
				})
				
				if(this.form.hasOwnProperty('id')) {
					param.id = this.form.id
					this.$u.api.editApply(param).then(res => {
						uni.hideLoading()
						if (res.code === 200) {
							uni.showToast({
								title: '编辑成功, 请等待后台审核',
								duration: 2000,
								success: () => {
									uni.navigateBack({
										delta: 1
									})
								}
							});
						}
					})
				}else {
					this.$u.api.applyStylist(param).then(res => {
						uni.hideLoading()
						if (res.code === 200) {
							uni.showToast({
								title: '提交成功, 请等待后台审核',
								duration: 2000,
								success: () => {
									// 跳转至上传风格照页面
									uni.navigateTo({
										url: '/pages/stylist/photoWall'
									})
								}
							});
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		position: relative;
		background-color: #F7F8FA;
	}

	.content {
		padding: 32upx 30upx;
		background-color: #F7F8FA;
		height: 100%;

		.photo_area {
			background: white;
			padding: 36upx 30upx 24upx 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.front {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.front_Img {
					width: 305upx;
					height: 212upx;
					background: #F4F4F4;
					border-radius: 8px;
					background-image: url(../../static/img/stylist/register_01.png);

					.u-upload>.u-preview-wrap {
						margin: 0 !important;
					}
				}

				.text {
					padding-top: 8upx;
					font-size: 24upx;
					font-weight: 400;
					color: #333333;
				}
			}

			.behind {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.behind_Img {
					width: 305upx;
					height: 212upx;
					background: #F4F4F4;
					border-radius: 8px;
					background-image: url(../../static/img/stylist/register_02.png);
				}

				.text {
					padding-top: 8upx;
					font-size: 24upx;
					font-weight: 400;
					color: #333333;
				}
			}

			.title {
				font-size: 28upx;
				font-weight: bold;
				padding-bottom: 12upx;
			}


			.start {
				.cetifica_img {
					width: 164upx;
					height: 164upx;
					background: #F4F4F4;
					border-radius: 8px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.info_content {
		margin: 32upx 0;
		padding: 0 30upx 32upx 30upx;
		background-color: white;
		display: flex;
		flex-wrap: wrap;

		view {
			display: flex;
		}

		.input_pla {
			color: #999999;
			font-size: 24upx;
		}

		.row {
			width: 100%;

			.nominal {
				width: 30%;
				height: 100upx;
				font-size: 28upx;
				font-weight: bold;
				color: #333333;
				align-items: center;
			}

			.input {
				width: 70%;
				padding: 20upx 0;
				align-items: center;
				font-size: 30upx;

				&.switch {
					justify-content: flex-end;
				}

				.textarea {
					margin: 20upx 0;
					min-height: 120upx;
				}
			}

			.del {
				width: 100%;
				height: 100upx;
				justify-content: center;
				align-items: center;
				font-size: 36upx;
				color: #f06c7a;
				background-color: rgba(255, 0, 0, 0.05);
				border-bottom: solid 1upx #eee;
			}
		}
	}

	.serve_area {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-top: 36upx;

		.tip {
			padding: 16upx 0 12upx 0;
		}

		.label {
			display: flex;
			align-items: center;

			.label_title {
				font-size: 28upx;
				font-weight: bold;
				color: #333333;
			}
		}
	}

	.searve_area2 {
		color: #999999;
		font-size: 20upx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16upx 0 12upx 0;
		border-bottom: 1px solid #e7e7e7;
	}

	.tip {
		margin: 39upx 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.label {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&_text {
			color: #666666;
			font-size: 22upx;
		}
	}

	.btn {
		width: 368upx;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		margin: 40upx auto 44upx;
	}

	.popup_modal {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 36upx 12upx;
		color: #333333;

		.title {
			font-weight: bold;
			font-size: 28upx;
		}

		.content {
			font-size: 26upx;
			background: white !important;
		}

		.popup_btn {
			width: 335upx;
			height: 90upx;
			line-height: 90upx;
			margin: 0 auto;
			background-color: #1C1724;
			border-radius: 49upx;
			color: white;
			text-align: center;
			font-size: 32upx;
			font-weight: bold;
		}
	}


	.slot-btn {
		width: 305rpx;
		height: 212rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 8px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}


	.bottomSheet_content {
		margin: 28upx 30upx;
		display: flex;
		flex-direction: column;
		min-height: 663upx;

		.title {
			font-size: 36upx;
			font-weight: bold;
			color: #333333;
			margin: 16upx;
			text-align: center;
		}
		
		.sp {
			margin: 12upx 16upx 0 0;
			display: inline-block;
		}

		.tag {
			display: inline-block;
			.tag_content {
				display: flex;
				align-items: center;
				font-size: 26upx;
				padding: 6upx 12upx;
				border-radius: 8upx;
				margin: 0 32upx 20upx 0;
				background-color: #F4F4F4;
		
				image {
					width: 28upx;
					height: 28upx;
					margin-right: 16upx;
				}
			}
		}
	}
</style>
